<template>
  <ScrollView orientation="vertical">
    <StackLayout class="root"> 
      <GridLayout class="tab-bar" columns="*, auto">
        <StackLayout col="0" orientation="horizontal">
          <StackLayout orientation="horizontal" v-for="(item, index) in baseCoins" v-bind:key="index" :class="'tab-item' + tabClass(index)" @tap="tapOnItem(index)">
            <Label :text="item" verticalAlignment="center"/>
          </StackLayout>
        </StackLayout>
        <GridLayout v-if="shouldShowFilter" col="1" class="filter" columns="*, auto">
            <TextField col="0" class="filter-input" hint="BTC" v-model="filterInput"/> 
            <Image col="1" class="filter-icon" src="~/images/search.png"/>
        </GridLayout>
      </GridLayout>
      <GridLayout class="list-header" columns="*, *, *">
        <Label class="list-col" col="0" text="Name" verticalAlignment="center"/>
        <Label class="list-col" col="1" text="Last Price" verticalAlignment="center"/>
        <Label class="list-col" col="2" text="24h Chg" horizontalAlignment="right" verticalAlignment="center"/>
      </GridLayout>
      <StackLayout v-for="(item, index) in listData" :class="'cell ' + shouldHighlight(index)" orientation="horizontal" v-bind:key="index" @tap="chooseItem(item.title, index)">
        <GridLayout columns="*, *, *" rows="auto, auto" verticalAlignment="center">
          <GridLayout col="0" row="0" rowSpan="2" columns="auto, auto" rows="auto, auto">
            <Image class="star" col="0" row="0" rowSpan="2" :src="markImage(item.title)" @tap="clickOnMark(item.title)"/>
            <Label class="cell-title" :text="item.title" col="1" row="0" />
            <Label class="cell-alt" :text="item.alt" col="1" row="1"/>
          </GridLayout>
          <Label class="cell-title2" :text="item.title2" col="1" row="0"/>
          <Label class="cell-alt2" :text="item.alt2" col="1" row="1"/>
          <Button :class="'cell-btn ' +  listItemButtonClass(item.btn)" :text="item.btn" col="2" row="0" rowSpan="2" />
        </GridLayout>
      </StackLayout>
    </StackLayout>
  </ScrollView>
</template>
<script>
import {get, post} from '~/business/NetRequest'
import {dataBus} from '~/business/DataBus'
import Chart from '~/components/common/Chart'
const platform = require("tns-core-modules/platform")

export default {
  data() {
    return {
      currentTab: 0,
      filterInput: '',
      clickIndex: -1,
      markedPairs: [],
      shouldShowFilter: platform.isIOS
    }
  },
  props:['baseCoins', 'coinsArr', 'coinPrices', 
    'refPrices'],
  computed: {
    listData() {
      if (!this.coinsArr || this.coinsArr.length == 0 || !this.coinPrices) {
        return []
      }
      let ret = []
      let base = this.baseCoins[this.currentTab]
      if (base != 'Marked') {
        let coins = this.coinsArr[this.currentTab]
        if (this.filterInput.length > 0) {
          coins = coins.filter(item => item.symbol.indexOf(this.filterInput.toUpperCase()) >= 0)
        }
        coins.forEach(item => {
          ret.push(dataBus.constructDisplayItem(item.symbol, base))
        })
      } else if(this.markedPairs.length > 0) {
        let list = this.markedPairs
        if (this.filterInput.length > 0) {
          list = this.markedPairs.filter(item => item.indexOf(this.filterInput.toUpperCase()) >= 0)
        }
        list.forEach(item => {
          let coin = item.split('/')[0]
          base = item.split('/')[1]
          const info = dataBus.constructDisplayItem(coin, base)
          info && ret.push(info)
        })
      }
      return ret
    }
  },
  mounted() {
    this.markedPairs = dataBus.markets.markedPairs
  },
  methods: {
    tabClass(tab) {
      return  this.currentTab == tab ? " active" : ""
    },
    tapOnItem(tab) {
      this.currentTab = tab
    },
    listItemButtonClass(content) {
      return content.indexOf('+') == 0 ? 'item-up' : 'item-down'
    },
    markImage(pair) {
      return this.markedPairs.indexOf(pair) >= 0 ? '~/images/marked.png' : '~/images/mark.png'
    },
    clickOnMark(pair) {
      dataBus.markPair(pair)
      this.markedPairs = dataBus.markets.markedPairs
    },
    chooseItem(pair, index) {
      this.clickIndex = index
      let self = this
      setTimeout(function() {
        self.clickIndex = -1
         if (dataBus.chosenPairCallBack) {
          dataBus.chosenPairCallBack(pair)
          dataBus.chosenPairCallBack = undefined
          self.$navigateBack()
        } else {
            self.$navigateTo(Chart, {
            props: {
              pair,
            }
      })
        }
      }, 100)
    },
    shouldHighlight(index) {
      if (index == this.clickIndex) {
        return 'cell-highlighted'
      } else {
        return ''
      }
    }
  },
}
</script>
<style scoped>
  .root {
    width: 100%;
    height: auto;
    background-color: #203956;
  }
  .tab-bar {
    background: linear-gradient(to right, #0B84DE, #23B1D5);
    height: 50;
    padding-left: 13;
    padding-right: 13;
  }
  .tab-item {
    margin-right: 20;
    font-family: "PingFangSC-Medium";
    font-size: 16;
    color: white;
  }
  .active {
    color: #01ECF4;
    border-bottom-width: 1;
    border-bottom-color: #01ECF4;
  }
  .filter {
    border-width: 1;
    border-color: #0878CC;
    border-radius: 3;
    width: 98;
    height: 30;
    background: #1590C7;
    padding: 3;
  }
  TextField {
    color: white;
    height: 30;
    border: none;
    font-size: 12;
  }
  .filter-icon {
    width: 18;
    height: 18;
  }
  .list-header {
    height: 50;
    background: #274867;
    padding-left: 13;
    padding-right: 13;
  }
  .list-col {
    font-size: 16;
    color: white;
  }
  .cell {
    height: 75;
    width: 100%;
    border-bottom-width: 1;
    border-bottom-color: #274867;
    padding-left: 13;
    padding-right: 13;
  }
  .star {
    width: 18;
    height: 18;
    margin-right: 9;
  }
  .cell-title, .cell-title2 {
    color: white;
    font-size: 14;
    font-family: "PingFangSC-Medium";
  }
  .cell-alt, .cell-alt2 {
    color: #6292BE;
    font-size: 12;
    font-family: "PingFangSC-Regular";
    margin-top: 3;
  }
  .cell-btn {
    width: 100;
    height: 30;
    border-radius: 2;
    color: white;
    font-size: 14;
    padding: 0;
  }
  .item-up {
    background: #00CE7D;
  }
  .item-down {
    background: #E55541;
  }
</style>


